<template>
  <div style="position: absolute;left:10%;top:26%;">
    <img style="width:600px;height:500px;" src="./img/aa.png"/>
  </div>
  <div class="box-login">
    <h1 style="color: white; margin-left: 40px; margin-top: 50px">
      注册七尾客服云
    </h1>
    <van-field
      style="
        width: 410px;
        height: 50px;
        margin-left: 40px;
        margin-top: 30px;
        padding-left: 10px;
        font-size: 17px;
      "
      v-model="username"
      placeholder="请输入账号"
      label="账号"
    />
    <van-field
      v-model="password"
      style="
        width: 410px;
        height: 50px;
        margin-left: 40px;
        margin-top: 20px;
        padding-left: 10px;
        font-size: 17px;
      "
      type="password"
      placeholder="请输入密码"
      label="密码"
    />
    <div style="display: flex">
      <van-field
        v-model="yan"
        style="
          width: 340px;
          height: 50px;
          margin-left: 40px;
          margin-top: 20px;
          padding-left: 10px;
          font-size: 17px;
        "
        type="text"
        placeholder="请输入验证码"
        label="验证码"
      />
      <div
        style="
          width: 70px;
          height: 50px;
          background: rgb(255, 255, 255);
          margin-top: 20px;
          text-align: center;
          line-height: 50px;
          cursor: pointer;
          font-size: 18px;
        "
        @click="generateCaptcha"
      >
        {{ captcha }}
      </div>
    </div>
    <button
      style="
        width: 410px;
        height: 50px;
        margin-left: 40px;
        margin-top: 40px;
        background-color: rgb(255, 145, 56);
        border: 1px solid rgb(255, 145, 56);
        color: white;
        font-size: 18px;
      "
      @click="Register"
      :plain="true"
    >
      注册
    </button>
    <p
      @click="$router.push('/login')"
      style="text-align: center; margin-top: 20px; color: white"
    >
      已有账号，去登录
    </p>
  </div>
</template>
  
  <script setup>
import { ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
const username = ref("");
const password = ref("");
const yan = ref("");
const captcha = ref("");

const Register = async () => {
  if (yan.value != captcha.value) {
    ElMessage({
      message: "验证码错误",
      type: "error",
      plain: true,
    });
  } else if (username.value == "" || password.value == "") {
    ElMessage({
      message: "账号或密码不能为空",
      type: "error",
      plain: true,
    });
  } else {
    const obj = {
      username: username.value,
      password: password.value,
    };
    const res = await axios.post("http://localhost:3000/addRegister", obj);
    if (res.data.code == 200) {
      ElMessage({
        message: "注册成功",
        type: "success",
        plain: true,
      });
      setTimeout(() => {
        window.location.href = "http://localhost:8080/login";
      }, 2000);
    } else {
      ElMessage({
        message: "注册失败",
        type: "error",
        plain: true,
      });
    }
  }
};

const generateCaptcha = () => {
  const chars =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  captcha.value = Array.from({ length: 4 }, () =>
    chars.charAt(Math.floor(Math.random() * chars.length))
  ).join("");
};

generateCaptcha();
</script>
  
  <style>
body {
  background-color: rgb(215, 226, 241);
}
.box-login {
  width: 500px;
  height: 500px;
  background-color: rgb(0, 110, 255);
  position: absolute;
  left: 60%;
  top: 25%;
}
</style>
  